<template>
	<view>
		<view class="sns-list flex-center">
			<view class="sns-list_item qq flex-center" @click="qqLogin" v-if="false">
				<i-icon name="qq-line"></i-icon>
			</view>
			<!-- v-if="$wechat.isWechat()" -->
			<view class="sns-list_item weixin flex-center" @click="weixinLogin" v-if="$wechat.isWechat()">
				<i-icon name="wechat-line"></i-icon>
			</view>
			<view class="sns-list_item weibo flex-center" @click="weiboLogin" v-if="false">
				<i-icon name="weibo-line"></i-icon>
			</view>
		</view>
		<u-action-sheet
			:show="welcomeWechat"
			:round="10"
			@close = "close"
		>
			<view class="flex-center" style="margin: 30rpx;">
				<u-avatar :src="bildData.avatar" size="38"></u-avatar>
				<text style="margin-left: 5px;">{{ bildData.username }}</text>
			</view>
			<view style="margin: 0 auto 30rpx;width: 550rpx;" v-if="wxaction == 'reg'">
				<view style="margin-bottom: 25rpx;">
					<text class="text-sm font">{{$t('login.weixin-title')}}</text>
				</view>
				<view style="width:300rpx; margin: 0 auto;">
					<u-button color="#2aae67" :text="$t('login.weixin-reg-mode-1')" shape="circle" :disabled="bildLoading" :loading="bildLoading" loadingText=" " @click="bindAccount"></u-button>
				</view>
				<u-divider text="OR"></u-divider>
				<text class="text-sm text-danger" @click="wxaction = 'bind'">{{$t('login.weixin-reg-mode-2')}}</text>
			</view>
			<view class="modal-form conter" style="width: 80%;margin-left: auto;margin-right: auto;" v-if="wxaction == 'bind'">
				<view class="modal-form_item flex-between">
					<i-icon name="smartphone-line" size="40rpx" color="#999"></i-icon>
					<view class="modal-form__inline">
						<input type="number" :placeholder="$t('login.input-mobile-placeholder')" v-model="bildData.mobile" class="input"/>
					</view>
				</view>
				<view class="modal-form_item flex-between">
					<i-icon name="lock-line" size="40rpx" color="#999"></i-icon>
					<view class="modal-form__inline">
						<input type="password" :placeholder="$t('login.input-password-placeholder')" v-model="bildData.password" class="input"/>
					</view>
				</view>
				<view class="modal-form_btn" style="width: 300rpx;margin: 0 auto;">
					<u-button color="#2aae67" :text="$t('login.weixin-bind-btn')" shape="circle" :disabled="bildLoading" :loading="bildLoading" loadingText=" " @click="bindAccount"></u-button>
					<!-- <text class="btn btn-radius text-xs btn-main"  @click="bindAccount">绑定</text> -->
				</view>
			</view>
		</u-action-sheet>
		
		<m-modal
			:show="invitationCodeShow"
			title="填写邀请码"
			btn="确定"
			@close="closeInvitation"
			@btnComplete="clickInvitation"
		>
			<view class="slot-content p-t-md p-b-md flex-center">
				<view class="modal-form">
					<view class="modal-form_item flex-between">
						<view class="modal-form__inline">
							<input type="text" placeholder="请输入邀请码" class="input" v-model="invitationCode"/>
						</view>
					</view>
				</view>
				<view class="text-center m-t-sm">
					<text class="text-xs text-warning">需要填写正确的验证码方可成功注册</text>
				</view>
			</view>
		</m-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	
	export default {
		name:"m-sns",
		data() {
			return {
				wxLoading:false,
				welcomeWechat:false,
				bildData:{
					openid:'',
					mobile:'',
					username:this.$t('login.weixin-data-username'),
					avatar:'',
					password:''
				},
				wxaction:'reg',
				bildLoading:false,
				code:'',
				invitationCodeShow:false,
				invitationCode:'',
				wxCode: null,
			};
		},
		created(){
			this.code = this.$util.getQueryString('code');
			if(this.code){
				this.$util.showLoading(this.$t('app.waiting'))
				this.weixinLogin()
			}
		},
		methods: {
			...mapMutations(['updateUserState']),
			...mapActions(['getUserInfo']),
			
			// 公众号登录
			async weixinLogin(){
				let pageUrl = window.location.href;
				let code = this.$util.getQueryString('code');
				if(code){
					// this.$util.showLoading('正在获取信息');
					setTimeout(() => {
						uni.showLoading({
							title: '正在获取信息'
						})
					}, 1000);
					// this.wxLoading = true;
					let data = {
						code: code
					}
					let res = await this.$api.user.gzhLogin(data)
					// console.log(res)
					if(res.code == 200){
						// this.$util.hideAll()
						// this.wxLoading = false;
						// 登录成功
						let thos = this
						thos.updateUserState({
							key : 'authToken',
							val : res.data.token
						})
						this.$util.showToast(this.$t('login.login-success'),function(){
							thos.getUserInfo()
							thos.$emit('callback')
						},'success')
						 uni.hideLoading()
					}
					
					if(res.code == 20025){
						// 信息获取成功
						this.bildData.openid = res.data.openid;
						this.bildData.username = res.data.username;
						this.bildData.avatar = res.data.avatar;
						this.welcomeWechat = true;
						uni.hideLoading()
					}
				}else{
					// 跳转授权页
					let data = {
						pageurl:pageUrl
					}
					let res = await this.$api.user.gzhJump(data)
					// console.log(res);
					if(res.code == 200){
						window.location.href = res.data;
					}
				}
			},
			
			// 绑定账号
			async bindAccount(){
				this.bildLoading = true;
				let data = {
					action: this.wxaction,
					mobile: this.bildData.mobile,
					avatar: this.bildData.avatar,
					username: this.bildData.username,
					openid: this.bildData.openid,
					password: this.bildData.password,
					invitation_code: this.invitationCode
				};
				let res = await this.$api.user.bindUserAccount(data)
				if(res.code == 200){
					// 绑定成功
					this.welcomeWechat = false
					let thos = this
					thos.updateUserState({
						key : 'authToken',
						val : res.data.token
					})
					this.$util.showToast(res.msg,function(){
						thos.getUserInfo()
						thos.$emit('callback')
					},'success')
				}
				// 提示填写邀请码
				if(res.code == 20004){
					this.welcomeWechat = false
					this.invitationCodeShow = true
				}
				this.bildLoading = false;
			},
			
			// 关闭邀请码填写框
			closeInvitation(){
				this.invitationCodeShow = false
				this.welcomeWechat = true;
			},
			
			// 继续注册新账号
			clickInvitation(){
				// this.$util.showToast('')
				this.invitationCodeShow = false
				this.welcomeWechat = true;
				this.bindAccount()
			},
			// 登录成功
			// success(){
			// 	this.getUserInfo()
			// 	this.$emit('callback')
			// }
		}
	}
</script>

<style lang="scss">
	.sns-list{
		&_item{
			position: relative;
			width: 88rpx;
			height: 88rpx;
			border-radius: 100%;
			text-align: center;
			background-color: #f3f3f3;
			font-size: 35rpx;
			margin: 0 20rpx;
		}
		&_item.qq{
			background: #5b98fb;
			background: linear-gradient(120deg,#5b98fb,#26d2ff);
			-webkit-box-shadow: 0 5px 10px 0 rgba(38,210,255,.3);
			box-shadow: 0 5px 10px 0 rgba(38,210,255,.3);
		}
		&_item.weixin{
			background: #2aae67;
			background: linear-gradient(120deg,#2aae67,#67ce96);
			-webkit-box-shadow: 0 5px 10px 0 rgba(42,174,103,.3);
			box-shadow: 0 5px 10px 0 rgba(42,174,103,.3);
		}
		&_item.weibo{
			background: #e6162d;
			background: linear-gradient(120deg,#e6162d,#e54b5c);
			-webkit-box-shadow: 0 5px 10px 0 rgba(230,22,45,.3);
			box-shadow: 0 5px 10px 0 rgba(230,22,45,.3);
		}
		/deep/ .i-icon{
			color: #fff!important;
		}
	}
</style>